<template>
	<div class="wrapper">
		<div class="search">
			<div class="search__back iconfont" @click="handleBack">&#xe6f2;</div>
			<div class="search__content">
				<span class="search__content__icon iconfont">&#xe62d;</span>
				<input class="search__content__input" placeholder="请输入商品名称" />
			</div>
		</div>
		<ShopInfo :item="item" :hideBorder="true" />
		<Content :shopName="item.name" />
		<Cart />
	</div>
</template>

<script>
	import { defineComponent, reactive, toRefs } from 'vue'
	import { useRouter, useRoute } from 'vue-router'
	import { get } from '../../utils/request'
	import ShopInfo from '../../components/ShopInfo'
	import Content from './Content'
	import Cart from './Cart'

	const ERR_OK = 0

	const useGetDetailShopEffect = () => {
		const route = useRoute()
		const data = reactive({ item: {} })
		const getShopData = async() => {
			const result = await get(`/api/shop/${route.params.id}`)
			if (result.errno === ERR_OK && result.data) {
				data.item = result.data
			}
		}
		const { item } = toRefs(data)
		return {
			item,
			getShopData
		}
	}

	const useRouterBackEffect = () => {
		const router = useRouter()
		const handleBack = () => {
			router.back()
		}
		return {
			handleBack
		}
	}

	export default defineComponent({
		name: 'Shop',
		components: { ShopInfo, Content, Cart },
		setup() {
			const { handleBack } = useRouterBackEffect()
			const { item, getShopData } = useGetDetailShopEffect()
			getShopData()
			return {
				item,
				handleBack
			}
		}
	})
</script>

<style lang="scss" scoped>
	@import '../../style/variable.scss';

	.wrapper {
		padding: 0 .18rem;
		.search {
			display: flex;
			margin: .14rem 0 .04rem 0;
			&__back {
				width: .3rem;
				height: .32rem;
				line-height: .32rem;
				font-size: .24rem;
				color: #b6b6b6;
			}
			&__content {
				display: flex;
				flex: 1;
				line-height: .32rem;
				background: $search-bgColor;
				border-radius: .16rem;
				&__icon {
					width: .44rem;
					text-align: center;
					color: $search-fontColor;
				}
				&__input {
					display: block;
					width: 100%;
					height: .32rem;
					font-size: .14rem;
					color: $content-font-color;
					padding-right: .2rem;
					border: none;
					outline: none;
					background: none;
					&::placeholder {
						color: $content-font-color;
					}
				}
			}
		}
	}
</style>
